<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="报修单号">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData"
              @press-enter="huiche" />
          </a-form-item>
          <a-form-item label="报修日期">
            <a-date-picker popup-container="html" class="bacClass" v-model="dropDownData2"
              style="width: 200px" />至<a-date-picker popup-container="html" class="bacClass" v-model="dropDownData3"
              style="width: 200px" />
          </a-form-item>
          <a-form-item label="报修部门">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData4"
              @press-enter="huiche" />
          </a-form-item>
          <a-form-item label="报修员工">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData5"
              @press-enter="huiche" />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar :items="toolbarList" @select="selectHandler"> </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" :justify="true" @change="tabChanges">
        <a-tab-pane :key="1" title="未录入">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
            @grid-ready="gridReady" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef" class="ag-theme-alpine"
            :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1">
          </AgGridVuesCopys>
          <paginationCopys :total="fySelet.total" show-total show-jumper show-page-size @change="PageSize"
            @page-size-change="change" style="justify-content: center"
            :page-size="fySelet.size" :current="fySelet.page" />
        </a-tab-pane>
        <a-tab-pane :key="2" title="已录入">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
            @grid-ready="gridReady2" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef" class="ag-theme-alpine"
            :rowData="tableDataList2" :columnDefs="tc2" :localeText="localeText1">
          </AgGridVuesCopys>
          <paginationCopys :total="fySelet2.total" show-total show-jumper show-page-size @change="PageSize2"
            @page-size-change="change2" style="justify-content: center"
            :page-size="fySelet2.size" :current="fySelet2.page" />
        </a-tab-pane>
      </a-tabs>
    </template>

    <a-modal :width="600" v-model:visible="visible" :on-before-ok="handleOk" @cancel="() => (visible = false)"
      :mask-closable="false">
      <template #title>
        {{ sideTitle }}
      </template>
      <a-form ref="formRef" :model="dataForm">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="完成时间" label-col-flex="80px" field="finishTime"
              :rules="[{ required: true, message: '完成时间必填' }]" :validate-trigger="['change', 'blur']">
              <a-date-picker popup-container="html" :disabled="pageData.sideTitle == '录入详情'" class="bacClass"
                style="width: 400px" v-model="dataForm.finishTime" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="维修说明" field="keepCause" label-col-flex="80px"
              :rules="[{ required: true, message: '维修说明必填' }]" :validate-trigger="['change', 'blur']">
              <a-textarea :disabled="pageData.sideTitle == '录入详情'" style="width: 400px"
                :auto-size="{ minRows: 3, maxRows: 500 }" class="bacClass" v-model="dataForm.keepCause" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </pageTabelLayout>
</template>

<script setup lang="ts">
import { post, get } from '@/api/http'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'

import { Message, Modal } from '@arco-design/web-vue'
import { baseURL } from '@/api/axios.config'
import { localeText } from '@/api/aggridZw'
const headerShow = ref(true)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
  dropDownData: '',
  dropDownData2: '',
  dropDownData3: '',
  dropDownData4: '',
  dropDownData5: '',
  showAdd: false,
  sideTitle: '',
})

const {
  dropDownData,
  dropDownData2,
  dropDownData3,
  dropDownData4,
  dropDownData5,
  showAdd,
  sideTitle,
} = toRefs(pageData)

const dataForm: any = reactive({
  id: null,
  finishTime: '',
  keepCause: '',
})

const tablesId: any = ref(1)

const toolbarList: any = ref(['查询'])

const tabChanges = (e: any) => {
  tablesId.value = e
  if (e == 1) {
    toolbarList.value = ['查询']
  } else if (e == 2) {
    toolbarList.value = ['查询']
  }
}

function selectList() {
  post({
    url: 'zcTemRepair/repairSubscribe/finishedRepairSubscribePage',
    data: {
      page: fySelet.page,
      limit: fySelet.size,
      repairCode: pageData.dropDownData,
      repairDep: pageData.dropDownData4,
      repairStaff: pageData.dropDownData5,
      repairTime: pageData.dropDownData2,
      repairTime2: pageData.dropDownData3,
      judgeState: 1,
      workersState: 1,
      completeState: 0,
    },
  }).then((res: any) => {
    gridOption.value.setRowData(res.data.list)
    fySelet.total = res.data.total
  })
}

function selectList2() {
  post({
    url: 'zcTemRepair/repairSubscribe/finishedRepairSubscribePage',
    data: {
      page: fySelet2.page,
      limit: fySelet2.size,
      repairCode: pageData.dropDownData,
      repairDep: pageData.dropDownData4,
      repairStaff: pageData.dropDownData5,
      repairTime: pageData.dropDownData2,
      repairTime2: pageData.dropDownData3,
      judgeState: 1,
      workersState: 1,
      completeState: 1,
    },
  }).then((res: any) => {
    gridOption2.value.setRowData(res.data.list)
    fySelet2.total = res.data.total
  })
}

const huiche = () => { }

const selectHandler = () => {
  if (tablesId.value == 1) {
    selectList()
  } else if (tablesId.value == 2) {
    selectList2()
  }
}

const options: any = ref([])
const options2: any = ref([])

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const tableDataList2: any = ref([])
const gridOption2 = ref()
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
}

const fySelet: any = reactive({
  total: 10,
  size: 10,
  page: 1,
})

const PageSize = (val: any) => {
  fySelet.page = val
  selectList()
}

const change = (val: any) => {
  fySelet.size = val
  selectList()
}

const fySelet2: any = reactive({
  total: 10,
  size: 10,
  page: 1,
})

const PageSize2 = (val: any) => {
  fySelet2.page = val
  selectList2()
}

const change2 = (val: any) => {
  fySelet2.size = val
  selectList2()
}

const tc = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
  {
    headerName: '公司',
    field: 'companyName',
    width: 150,
  },
  {
    headerName: '报修单号',
    field: 'repairCode',
    // pinned: o['fixed'],
    width: 150,
  },
  {
    headerName: '报修时间',
    field: 'repairTime',
    width: 150,
  },
  {
    headerName: '报修部门',
    field: 'repairDep',
    width: 150,
  },
  {
    headerName: '报修员工',
    field: 'repairStaff',
    width: 150,
  },
  {
    headerName: '设备编号',
    field: 'facilityCode',
    width: 150,
  },
  {
    headerName: '设备名称',
    field: 'facilityName',
    width: 150,
  },
  {
    headerName: '设备类型',
    field: 'facilityType',
    width: 150,
  },
  {
    headerName: '维修部门',
    field: 'maintainDep',
    width: 150,
  },
  // {
  //     headerName: '维修部门负责人',
  //     field: 'maintainDepStaff',
  //     width: 150
  // },
  {
    headerName: '维修人',
    field: 'keepStaff',
    width: 150,
  },
  {
    headerName: '报修说明',
    field: 'repairRemark',
    width: 150,
  },
  {
    headerName: '设备故障描述',
    field: 'facilityHitchcause',
    width: 150,
  },
  {
    headerName: '维修类型',
    field: 'keepType',
    pinned: 'right',
    width: 150,
    filter: true,
    filterParams: {
      valueFormatter: function (params: any) {
        return params.value == 1
          ? '厂内直接维修'
          : params.value == 2
            ? '厂内采购配件维修'
            : params.value == 3
              ? '外发维修'
              : ''
      },
    },
    cellRenderer: {
      template: `
            <el-tag type="success" v-if="states == 1">厂内直接维修</el-tag>
            <el-tag type="warning"  v-if="states == 2">厂内采购配件维修</el-tag>
            <el-tag type="warning"  v-if="states == 3">外发维修</el-tag>
            `,
      setup(props: any) {
        return {
          states: props.params.data.keepType,
        }
      },
    },
  },
  {
    headerName: '操作',
    field: 'slot',
    pinned: 'right',
    width: 160,
    cellRenderer: {
      template: `
            <a-space>
                <a-tag class="tagCss" @click="a" >回馈完成时间</a-tag>
            </a-space>
            `,
      setup(props: any) {
        const a = () => {
          updateList(props.params.data, 1) // props.params.data
        }
        return {
          a,
        }
      },
    },
  },
]

const tc2 = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
  {
    headerName: '公司',
    field: 'companyName',
    width: 150,
  },
  {
    headerName: '报修单号',
    field: 'repairCode',
    // pinned: o['fixed'],
    width: 150,
  },
  {
    headerName: '报修时间',
    field: 'repairTime',
    width: 150,
  },
  {
    headerName: '报修部门',
    field: 'repairDep',
    width: 150,
  },
  {
    headerName: '报修员工',
    field: 'repairStaff',
    width: 150,
  },
  {
    headerName: '设备编号',
    field: 'facilityCode',
    width: 150,
  },
  {
    headerName: '设备名称',
    field: 'facilityName',
    width: 150,
  },
  {
    headerName: '设备类型',
    field: 'facilityType',
    width: 150,
  },
  {
    headerName: '维修部门',
    field: 'maintainDep',
    width: 150,
  },
  // {
  //     headerName: '维修部门负责人',
  //     field: 'maintainDepStaff',
  //     width: 150
  // },
  {
    headerName: '报修说明',
    field: 'repairRemark',
    width: 150,
  },
  {
    headerName: '设备故障描述',
    field: 'facilityHitchcause',
    width: 150,
  },
  {
    headerName: '维修原因',
    field: 'keepCause',
    width: 150,
  },
  {
    headerName: '完成时间',
    field: 'finishTime',
    width: 150,
  },
  {
    headerName: '报修图片详情',
    field: 'keepPictureUrl',
    pinned: 'right',
    width: 200,
    cellRenderer: {
      template: `
            <a-space>
                <a-image v-for="i in states" width="40" :src="i"/>
                <span v-if="states.length == 0">暂无图片</span>    
            </a-space>
            `,
      setup(props: any) {
        return {
          states: props.params.data.keepPictureUrl.map((v: any) => {
            return baseURL + v
          }),
        }
      },
    },
  },
  {
    headerName: '维修状态',
    field: 'completeState',
    pinned: 'right',
    width: 150,
    filter: true,
    filterParams: {
      valueFormatter: function (params: any) {
        return params.value == 0 ? '未完成' : params.value == 1 ? '维修完成' : ''
      },
    },
    cellRenderer: {
      template: `
            <el-tag type="success" v-if="states == 0">未完成</el-tag>
            <el-tag type="warning"  v-if="states == 1">维修完成</el-tag>
            `,
      setup(props: any) {
        return {
          states: props.params.data.completeState,
        }
      },
    },
  },
  {
    headerName: '操作',
    field: 'slot',
    pinned: 'right',
    width: 160,
    cellRenderer: {
      template: `
            <a-space>
                <a-tag class="tagCss" @click="a" >详 情</a-tag>
            </a-space>
            `,
      setup(props: any) {
        const a = () => {
          updateList(props.params.data, 2) // props.params.data
        }
        return {
          a,
        }
      },
    },
  },
]

const updateList = (e: any, num: any) => {
  if (num == 1) {
    dataForm.finishTime = ''
    dataForm.keepCause = ''
    dataForm.id = e.id
    pageData.sideTitle = '录入'
    visible.value = true
  } else if (num == 2) {
    dataForm.finishTime = e.finishTime
    dataForm.keepCause = e.keepCause
    pageData.sideTitle = '录入详情'
    visible.value = true
  }
}

const wxYgList: any = ref([])

const visible: any = ref(false)

const formRef: any = ref()

const handleOk = async () => {
  if (pageData.sideTitle == '录入') {
    const err = await formRef.value?.validate()
    if (!err) {
      const res = await post({
        url: 'zcTemRepair/repairSubscribe/updateRepairSubscribe',
        data: [
          {
            id: dataForm.id,
            finishTime: dataForm.finishTime,
            keepCause: dataForm.keepCause,
            completeState: 1,
          },
        ],
      })
      if (res.code == 200) {
        Message.success('成功')
        selectList()
        selectList2()
        return true
      }
    } else {
      return false
    }
  } else {
    return true
  }
}
</script>
<style scoped lang="less">
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>
